<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>Hello H5+</title>
		<script type="text/javascript" src="js/update.js"></script>
		<script type="text/javascript" charset="utf-8">
			 //取消浏览器的所有事件，使得active的样式在手机上正常生效
			document.addEventListener('touchstart', function() {
				return false;
			}, true);
			 // 禁止选择
			document.oncontextmenu = function() {
				return false;
			};
			 // H5 plus事件处理
			var as = 'slide-in-right',
				at = 200; // 默认动画时间
			function plusReady() {
				// 隐藏滚动条
				plus.webview.currentWebview().setStyle({
					scrollIndicator: 'none'
				});
				// Android处理返回键
				plus.key.addEventListener('backbutton', function() {
					if (confirm('确认退出？')) {
						plus.runtime.quit();
					}
				}, false);
				compatibleAdjust();
			}
			if (window.plus) {
				plusReady();
			} else {
				document.addEventListener('plusready', plusReady, false);
			}
			 // DOMContentLoaded事件处理
			var _domReady = false;
			document.addEventListener('DOMContentLoaded', function() {
				_domReady = true;
				compatibleAdjust();
			}, false);
			 // 兼容性样式调整
			var _adjust = false;

			function compatibleAdjust() {
					if (_adjust || !window.plus || !_domReady) {
						return;
					}
					_adjust = true;
					// iOS平台使用div的滚动条
					if ('iOS' == plus.os.name) {
						as = 'pop-in';
						at = 300;
						document.getElementById('content').className = 'scontent';
					}
					// 预创建二级窗口
					preateWebviews();
					// 关闭启动界面
					setTimeout(function() {
						plus.navigator.closeSplashscreen();
					}, 500);
				}
				// 处理点击事件
			var _openw = null;

			function clicked(id) {
					if (_openw) {
						return;
					}
					_openw = preate[id];
					if (_openw) {
						if (_openw.showded) {
							_openw.show(as, at);
						} else {
							_openw.show(as, at);
							_openw.showded = true;
						}
						_openw = null;
					} else {
						var wa = plus.nativeUI.showWaiting();
						_openw = plus.webview.create(id, id, {
							scrollIndicator: 'none',
							scalable: false,
							popGesture: 'hide'
						}, {
							preate: true
						});
						preate[id] = _openw;
						_openw.addEventListener('loaded', function() { //叶面加载完成后才显示
							//		setTimeout(function(){//延后显示可避免低端机上动画时白屏
							wa.close();
							_openw.show(as, at);
							_openw.showded = true;
							_openw = null;
							//		},200);
						}, false);
						_openw.addEventListener('close', function() { //页面关闭后可再次打开
							_openw = null;
							preate[id] && (preate[id] = null); //兼容窗口的关闭
						}, false);
					}
				}
				// 预创建二级页面
			var preate = {};

			function preateWebviews() {
				preateWebivew('plus/webview.html');
				var plist = document.getElementById('plist').children;
				// 由于启动是预创建过多Webview窗口会消耗较长的时间，所以这里限制仅创建5个
				for (var i = 0; i < plist.length && i < 2; i++) {
					var id = plist[i].id;
					id && (id.length > 0) && preateWebivew(id);
				}
			}

			function preateWebivew(id) {
					if (!preate[id]) {
						var w = plus.webview.create(id, id, {
							scrollIndicator: 'none',
							scalable: false,
							popGesture: 'hide'
						}, {
							preate: true
						});
						preate[id] = w;
						w.addEventListener('close', function() { //页面关闭后可再次打开
							_openw = null;
							preate[id] && (preate[id] = null); //兼容窗口的关闭
						}, false);
					}
				}
				// 清除预创建页面(仅)

			function preateClear() {
				for (var p in preate) {
					var w = preate[p];
					if (w && w.showded && !w.isVisible()) {
						w.close();
						preate[p] = null;
					}
				}
			}
		</script>
		<link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8" />
		<style type="text/css">
			li {
				padding: 0.8em;
				border-bottom: 1px solid #eaeaea;
			}
			li:active {
				background: #f4f4f4;
			}
			.iabout {
				background: no-repeat center center url();
				background-size: 50px 44px;
			}
			.item {
				display: block;
				background: no-repeat right center url();
				background-size: 12px 22px;
				-ms-touch-action: auto;
			}
			.chs {
				font-size: 0.8em;
				color: #838383;
			}
		</style>
	</head>

	<body onselectstart="return false;">
		<header>
			<div style="width:15%;height:100%;float:left;"></div>
			<div class="nvtt">Hello HTML5+</div>
			<div class="nvbt iabout" onclick="clicked('about.html');"></div>
		</header>
		<div id="content" class="content">
			<ul id="plist" style="list-style:none;margin:0;padding:0;text-align:left;">
				<li id="plus/accelerometer.html" onclick="clicked(this.id);">
					<span class="item">Accelerometer
					<div class="chs">加速度传感器</div>
				</span>
				</li>
				<li id="plus/audio.html" onclick="clicked(this.id);">
					<span class="item">Audio
					<div class="chs">音频录制/播放</div>
				</span>
				</li>
				<li id="plus/barcode.html" onclick="clicked(this.id);">
					<span class="item">Barcode
					<div class="chs">二维码扫描</div>
				</span>
				</li>
				<li id="plus/camera.html" onclick="clicked(this.id);">
					<span class="item">Camera
					<div class="chs">摄像头拍照/录像</div>
				</span>
				</li>
				<li id="plus/device.html" onclick="clicked(this.id);">
					<span class="item">Device
					<div class="chs">设备信息</div>
				</span>
				</li>
				<li id="plus/downloader.html" onclick="clicked(this.id);">
					<span class="item">Downloader
					<div class="chs">下载管理</div>
				</span>
				</li>
				<li id="plus/events.html" onclick="clicked(this.id);">
					<span class="item">Events
					<div class="chs">系统事件</div>
				</span>
				</li>
				<li id="plus/file.html" onclick="clicked(this.id);">
					<span class="item">File System
					<div class="chs">文件系统</div>
				</span>
				</li>
				<li id="plus/gallery.html" onclick="clicked(this.id);">
					<span class="item">Gallery
					<div class="chs">系统相册</div>
				</span>
				</li>
				<li id="plus/geolocation.html" onclick="clicked(this.id);">
					<span class="item">Geolocation
					<div class="chs">地理定位</div>
				</span>
				</li>
				<li id="plus/maps.html" onclick="clicked(this.id);">
					<span class="item">Maps
					<div class="chs">地图</div>
				</span>
				</li>
				<li id="plus/message.html" onclick="clicked(this.id);">
					<span class="item">Messaging
					<div class="chs">消息通讯</div>
				</span>
				</li>
				<li id="plus/nativeui.html" onclick="clicked(this.id);">
					<span class="item">NativeUI
					<div class="chs">原生界面</div>
				</span>
				</li>
				<li id="plus/navigator.html" onclick="clicked(this.id);">
					<span class="item">Navigator
					<div class="chs">浏览器环境</div>
				</span>
				</li>
				<li id="plus/orientation.html" onclick="clicked(this.id);">
					<span class="item">Orientation
					<div class="chs">方向传感器</div>
				</span>
				</li>
				<li id="plus/payment.html" onclick="clicked(this.id);">
					<span class="item">Payment
					<div class="chs">支付</div>
				</span>
				</li>
				<li id="plus/proximity.html" onclick="clicked(this.id);">
					<span class="item">Proximity
					<div class="chs">距离传感器</div>
				</span>
				</li>
				<li id="plus/push.html" onclick="clicked(this.id);">
					<span class="item">Push
					<div class="chs">消息推送</div>
				</span>
				</li>
				<li id="plus/runtime.html" onclick="clicked(this.id);">
					<span class="item">Runtime
					<div class="chs">运行环境</div>
				</span>
				</li>
				<li id="plus/share.html" onclick="clicked(this.id);">
					<span class="item">Share
					<div class="chs">分享</div>
				</span>
				</li>
				<li id="plus/speech.html" onclick="clicked(this.id);">
					<span class="item">Speech
					<div class="chs">语音识别</div>
				</span>
				</li>
				<li id="plus/statistic.html" onclick="clicked(this.id);">
					<span class="item">Statistic
					<div class="chs">统计管理</div>
				</span>
				</li>
				<li id="plus/storage.html" onclick="clicked(this.id);">
					<span class="item">Storage
					<div class="chs">本地数据存储</div>
				</span>
				</li>
				<li id="plus/uploader.html" onclick="clicked(this.id);">
					<span class="item">Uploader
					<div class="chs">上传管理</div>
				</span>
				</li>
				<li id="plus/webview.html" onclick="clicked(this.id);">
					<span class="item">Webview
					<div class="chs">窗口管理</div>
				</span>
				</li>
				<li id="plus/xhr.html" onclick="clicked(this.id);">
					<span class="item">XMLHttpRequest
					<div class="chs">跨域请求</div>
				</span>
				</li>
				<li id="plus/zip.html" onclick="clicked(this.id);">
					<span class="item">ZIP
					<div class="chs">文件压缩/解压</div>
				</span>
				</li>
				<li id="plus/njs.html" onclick="clicked(this.id)">
					<span class="item">Native.JS
					<div class="chs">JS调用原生代码</div>
				</span>
				</li>
			</ul>
		</div>
	</body>

</html>